<template>
	<view>
		<view style="width: 694.6rpx;box-sizing: border-box;padding: 36.24rpx 28.4rpx 47rpx;margin: 32.616rpx 0 0 27.77rpx;background: #FFFFFF;border-radius: 30.2rpx;">
			<view style="font-size:30rpx;font-weight: bold;">{{biao_qian}}</view>
			<view style="margin: 20rpx 0;">
				 <textarea placeholder="请详细描述该课程信息"  placeholder-style="font-size:30.15rpx" style="font-size:30.15rpx;width: 598.42rpx;min-height: 197.5rpx;border: 0.6rpx solid #BFBFBF;border-radius: 12rpx;padding: 20rpx;letter-spacing: 1rpx;" v-model="content" maxlength="1000"/>
			</view>
			<view style="font-size: 26.58rpx;color: #383838;font-weight: bold;letter-spacing: 1rpx;margin-top: 41.6rpx;">
				<text style="font-size: 26.58rpx;color: #383838;">课程评论图片</text>
			</view>
			<view style="display: flex;margin-top: 39rpx;flex-wrap: wrap;">
				<view v-if="img_list.length>0" style="display: flex;flex-wrap: wrap;">
					<view v-for="(itme,index) in img_list" :key="index"  style="margin-right: 45rpx;width: 170rpx;height: 170rpx;position: relative;margin-bottom: 20rpx;" @tap.stop="cha_kan">
						<image :src="itme" mode="" style="width: 170rpx;height: 170rpx;border-radius: 12rpx;border: #D6D6D6 0.09rpx solid;" ></image>
						<view style="width: 50rpx;height: 50rpx;position: absolute;top: -25rpx;left: 135rpx;" @tap.stop="shanchu(index)">
							<image :src="chahao" style="width: 50rpx;height: 50rpx;"></image>
						</view>
					</view>
				</view>
				<view  @tap="addl">
					<image :src="shangchuan" style="width: 170rpx;height: 170rpx;"></image>
				</view>
			</view>
			<view style="font-size: 26.58rpx;color: #383838;font-weight: bold;letter-spacing: 1rpx;margin-top: 41.6rpx;">
				<text style="font-size: 32rpx;color: #383838;">课程评分</text>
			</view>
			<view style="margin-top: 15rpx;">
				<view>
					<text class="xingxing">服务态度</text>
					<van-rate :value="rete_xing" @change="fuwu" touchable></van-rate>
				</view>
				<view >
					<text class="xingxing">课程质量</text>
					<van-rate :value="rete_xing" @change="zhiliang" touchable></van-rate>
				</view>
				<view >
					<text class="xingxing">环境设施</text>
					<van-rate :value="rete_xing" @change="huanjing" touchable></van-rate>
				</view>
				<view>
					<text class="xingxing">师资力量</text>
					<van-rate :value="rete_xing" @change="shizi" touchable></van-rate>
				</view>
				<view >
					<text class="xingxing">性价比</text>
					<van-rate :value="rete_xing" @change="xingjia" touchable></van-rate>
				</view>
			</view>
			<view style="width: 648.7rpx;height: 85.76rpx;background:#EE7B30 ;border-radius: 42.9rpx;color: #FFFFFF;font-size: 29rpx;text-align: center;line-height:85.76rpx;margin-top: 50rpx;" @tap="tiaozhuan">
				确定
			</view>
		</view>
	</view>
</template>
<script>
	import qiniu from "../../../common/qiniuUploader.js"
	export default {
		data() {
			return {
				content: "",
				title: "",
				biao_qian: "",
				key: "",
				token: "",
				img_list: [],
				list: true,
				rete_xing: 5,
				fuwu_: 5,
				zhiliang_: 5,
				huanjing_: 5,
				shizi_: 5,
				xingjia_: 5,
				mastersetprice_id: "",
				appointment_id: "",
				mechanism_id: "",
				master_id: "",
				user_id: "",
				shangchuan: "http://img.curiousmore.com/644187",
				chahao: "http://img.curiousmore.com/566544"
			}
		},
		methods:{
			shanchu(index){
				this.img_list.splice(index,1)
			},
			xingjia(e){
				this.xingjia_ = e.detail
			},
			shizi(e){
				this.shizi_ = e.detail
			},
			huanjing(e){
				this.huanjing_ = e.detail
			},
			zhiliang(e){
				this.zhiliang_ = e.detail
			},
			fuwu(e){
				this.fuwu_ = e.detail
			},
			cha_kan(){
				let me = this
				 uni.previewImage({
					  urls: me.img_list,
					  indicator: "number"
				 })
			},
			to(){
				this.key = Math.ceil(Math.random()*1000000)*Math.ceil(Math.random()*1000000)
				uni.request({
					url:"https://www.curiousmore.com/qmore/push/upload/getToken",
					data:{
						key:this.key
					},
					method:"post",
					success:(res) => {
						this.token = res.data.data
					}
				})
			},
			addl(){
				let me = this
				uni.showActionSheet({
				  itemList: ['从手机相册选择', '拍照'],
				  success: function(res) {
					let aa = []
					if(res.tapIndex == 1){
						aa = ["camera"]
					}else{
						aa = ["album"]
					}
					me.to()
					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: aa,
						success:(res_) => {
							let filePath = res_.tempFilePaths[0]
							if(me.token != ""){
								qiniu.upload(filePath, (res) => {
									me.img_list.push(res.fileUrl)
								}, (error) => {
									console.log('error: ' + error);
								}, {
									region: 'ECN',
									domain: 'http://img.curiousmore.com', 
									key: me.key, 
									uptoken: me.token, 
								}, (res) => {
									
								}, () => {
									// 取消上传
								}, () => {
									// `before` 上传前执行的操作
								}, (err) => {
									// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
								});
							}
						}
					})
				  },
				fail: function(res) {
				    console.log(res.errMsg)
				  }
				})
			},
			async	tiaozhuan(){
					let  data = (this.zhiliang_ + this.shizi_ + this.xingjia_ + this.huanjing_ + this.fuwu_)/5
					if(this.content != ""){
						const res = await this.$myRequest({
							url: "/masterComment/insert",
							data: {
								mastersetprice_id: this.mastersetprice_id,
								appointment_id: this.appointment_id,
								mechanism_id: this.mechanism_id,
								content: this.content,
								user_id: this.user_id,
								type: "teach_paypal_course",
								photo_url: this.img_list.toString(),
								course_quality: this.zhiliang_,
								environment: this.huanjing_,
								faculty: this.shizi_,
								cost_effectiveness: this.xingjia_,
								attitude: this.fuwu_,
								average_score: data,
								master_id: this.master_id,
								user_appointment_id: this.user_appointment_id
							},
							header: {
								'content-type': 'application/json'
							},
							methed: "post"
						})
						if(res.code == 0){
							uni.navigateBack({
							    delta: 1
							});
						}
					}else{
						uni.showToast({
							title: "请填写评论内容",
							icon:"none"
						})
					}
					
				},
		},
		onLoad(options) {
			const val = JSON.parse(decodeURIComponent(options.num))
			this.biao_qian = val.title
			this.mastersetprice_id = val.master_set_price_id
			this.appointment_id = val.appointment_id
			this.mechanism_id = val.mechanism_id
			this.user_appointment_id = val.id
			this.master_id = val.master_id
			this.user_id = val.user_id
		},
		onShow() {
			
		}
	}
</script>
<style lang="scss" scoped>
	.xingxing{
		font-size: 28rpx;
		font-weight: bold;
	}
</style>